<template>
  <div class="topNav">
    <div class="topleft">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-31liebiao"></use>
      </svg>
    </div>

    <div class="topContent">
      <!-- <span @click="$router.push('/userinfo')"> 我的</span
      ><span class="active">发现</span
      ><span @click="$router.push('/stations')">云村</span><span>视频</span> -->
      <div class="keyword" @click="$router.push('/search')">
        <div class="searchIcon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-sousuo"></use>
          </svg>
        </div>
        <input
          type="text"
          name=""
          id=""
          disabled
          class="kword"
          placeholder="aa"
          ref="keyword"
        />
      </div>
    </div>
    <div class="topright" @click="$router.push('/search')">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-sousuo"></use>
      </svg>
    </div>
  </div>
</template>

<script>
import { onMounted } from "@vue/runtime-core";
export default {
  setup() {
    //     onMounted(() => {
    //   let metas = document.getElementsByTagName("meta");
    //     metas["theme-color"].content = "#d8402f;";
    // });
  },
};
</script>

<style lang="less" scoped>
.topNav {
  background-color: #d8402f;
  // color: #fff;
  width: 100%;
  height: 1rem;
  padding: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .topleft,
  .topright {
    svg {
      fill: rgb(226, 223, 223);
    }
  }
  .topContent {
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    // align-items: center;
    font-size: 0.36rem;
    color: #fff;
    .keyword {
      height: 100%;
      flex: 9;
      padding: 0 0.2rem;
      position: relative;
      .searchIcon {
        width: 0.3rem;
        height: 0.3rem;
        position: absolute;
        fill: #e8b9b6;
        top: 50%;
        left: 0.4rem;
        transform: translateY(-50%);
        .icon {
          width: 100%;
          height: 100%;
        }
      }
      input {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        padding: 0.2rem 0.2rem;
        padding-left: 0.7rem;
        font-size: 0.3rem;
        border-radius: 0.4rem;
        background-color: rgba(255, 255, 255, 0.3);
        color: #fff;
      }
      input::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.27rem;
        font-weight: 400;
      }
    }
  }
  .active {
    font-weight: 700;
  }
}
</style>